﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表单插件</title>     
    <meta name="keywords" content="免费控件,免费UI控件,免费开源UI,免费开源UI控件,免费开源UI框架,表单插件" />  
    <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="../../lib/ligerUI/skins/Gray2014/css/all.css" rel="stylesheet" />
    <script src="../../lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerForm.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerButton.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerRadio.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
    <script type="text/javascript">

     
        $(function ()
        {
            createForm($(".firstform"));

        });

        function addForm()
        {
            var jform = $("<div class='form'></div>");
            $("#wrap1").append(jform);
            createForm(jform);
        }
        window.SYS = {

        };
        function getData()
        {
            var listdata = []; 
            for (var i = 0; i < forms.length; i++)
            {
                var form = forms[i];
                listdata.push(form.getData());
            }
            alert(liger.toJSON(listdata));
        }
        function delForm(btn)
        { 
            var jform = $(btn).parents(".l-form:first")
            jform.remove();

        }

        var index = 0;
        var forms = [];
        function createForm(jform)
        {
            var form = jform.ligerForm({
                inputWidth: 100,
                prefixID : 'form' + index++,
                fields: [
                    {
                        hideLabel: true, name: 'fromProvince', type: 'select',spaceWidth:10, newline: false, editor: {
                            url: 'data/province.txt', ajaxType: 'get',
                            valueField: 'id', textField: 'text',
                            onSelected: function (value)
                            {
                                var formCity = form.getEditor("formCity");

                                formCity.setData([]);
                            }
                        }
                    },
                    {
                        hideLabel: true, name: 'fromCity', type: 'select', spaceWidth: 10, newline: false, editor: {
                            url: 'data/city.txt', ajaxType: 'get',  
                            valueField: 'id', textField: 'text'
                        },
                        afterContent: '<li style="width:30px;text-align:center">到</li>'
                    },
                    {
                        hideLabel: true, name: 'toProvince', type: 'select', spaceWidth: 10, newline: false, editor: {
                            url: 'data/province.txt', ajaxType: 'get', 
                            valueField: 'id', textField: 'text'
                        }
                    },
                    {
                        hideLabel: true, name: 'toCity', type: 'select', spaceWidth: 10, newline: false, editor: {
                            url: 'data/city.txt', ajaxType: 'get', 
                            valueField: 'id', textField: 'text'
                        },
                        afterContent: '<li style="width:100px;text-align:center"> <input type="button" value="删除" onclick="delForm(this)" /></li>'
                    }
                ]
            });
            forms.push(form);
        }
    </script> 
    <style type="text/css">
        .l-form {
            margin: 0px; 
        }
    </style>
</head>

<body style="padding:10px">
    <input type="button" value="增加行" onclick="addForm()" />
    <input type="button" value="获取" onclick="getData()" />

    <div id="wrap1">
        <div class="firstform"></div> 
    </div>
</body>
</html>
